<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>	
		*{
			margin: 0;
			padding: 0;
		}
		body,html{
			width: 100%;
			height: 100%;
		}

		.circle{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: yellow;
			position: absolute;
		}
		</style>
	</head>
	<body>
		<div class="circle"></div>
		<script type="text/javascript">
			/*
			 * 1.mousemove
			 * 2.div position
			 * 3.获取当前鼠标的坐标
			 * 4.将坐标赋值到div上
			 * 5.保持鼠标在div的中心点
			 */

			 var circle = document.querySelector('.circle');
			 document.body.addEventListener('mousemove', function (e) {
			 		circle.style.left = e.pageX - 25 + 'px';
			 		circle.style.top = e.pageY -25 + 'px';
			 	
			 });

			 console.log(circle.getBoundingClientRect());
			 //getBoundingClientRect()  获取目标元素与窗口的一些信息,不包含菜单栏。
			 // Range.getBoundingClientRect() 返回一个 ClientRect 对象，该对象限定了选定的文档对象的内容，该方法返回了一个矩形，这个矩形包围了该文档对象中所有元素的边界矩形集合

			 document.addEventListener('touchmove',function (e) {
			 	console.log(e);
			 })
		</script>
	</body>
</html>
